<template>
  <div>
    <van-nav-bar
      title="我的邀请"
      left-text="返回"
      right-text="分享海报"
      left-arrow
      @click-left="$router.back()"
      @click-right="creatPoster"
    />
    <van-pull-refresh v-model="loading" @refresh="onRefresh" class="refresh">
      <div class="invite">
        <div class="invitnum">
          <div class="top">{{ total }}</div>
          <div class="bottom">邀请人数</div>
        </div>
        <div class="invitnum">
          <div class="top">{{ count }}</div>
          <div class="bottom">有效人数(实名)</div>
        </div>
      </div>

      <div class="iniviteList" v-if="invitInfo">
        <div class="empty" v-if="invitInfo.data.length < 1">
          <van-empty description="暂无数据" />
        </div>
        <div class="item" v-for="item in invitInfo.data" :key="item.id"></div>
      </div>

      <van-popup v-model:show="showPop" class="share_con">
        <img :src="shareImg" />
        <div class="share_btn_group">
          <a class="share_btn" @click="saveImg">长按保存图片</a>
          <div
            class="share_btn"
            @click="copy"
            id="copy"
            :data-clipboard-text="invite_url"
          >
            复制链接
          </div>
        </div>
      </van-popup>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import commonStore from "@/store/common";
import QRCode from "qrcode";
import { Toast } from "vant";
import userStore from "../store/user";

const common = commonStore();
const loading = ref(false);
const user = computed(() => common.userInfo);
const setting = computed(() => common.setting);
const invitURL = ref(
  process.env.VUE_APP_BASE_URL + "#/register?invite=" + user.value.invite_code
);

// 下拉刷新
const onRefresh = () => {
  getInvite()
    .then((res) => {
      Toast.success(res);
      loading.value = false;
    })
    .catch((err) => {
      Toast.fail(err);
      loading.value = false;
    });
};

// 获取邀请信息
let total = ref(0);
let count = ref(0);
let invitInfo = ref("");
const invite = userStore();
const getInvite = () => {
  return new Promise((resolve, reject) => {
    invite
      .invite()
      .then((res) => {
        invitInfo.value = res;
        total.value = res.total;
        count.value = res.auth_count;
        resolve("刷新成功");
      })
      .catch(() => {
        reject("请求失败");
      });
  });
};

// 分享弹框
const showPop = ref(false);
let qrcode = ref(null);
const shareImg = ref(null);
QRCode.toDataURL(invitURL.value)
  .then((result) => {
    qrcode.value = result;
  })
  .catch(() => {
    Toast.fail("出错了");
  });

// 创建海报
const creatPoster = () => {
  if (!setting.value.poster.invite?.qrcode?.img) {
    Toast.fail("没有设置海报");
    return;
  }
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  const img = new Image();
  img.setAttribute("crossOrigin", "anonymous");
  img.src = setting.value.file_url + setting.value.poster.invite.qrcode.img;
  img.onload = function () {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 二维码
    const img1 = new Image();
    console.log("qrcode", qrcode.value);
    img1.src = qrcode.value;
    img1.onload = function () {
      showPop.value = true;
      Toast.clear();
      ctx.drawImage(
        img1,
        setting.value.poster.invite.qrcode.x,
        setting.value.poster.invite.qrcode.y,
        setting.value.poster.invite.qrcode.w,
        setting.value.poster.invite.qrcode.w
      );
      const url = canvas.toDataURL("image/jpeg", 0.8);
      shareImg.value = url;
    };
  };
};

const onload = () => {
  getInvite();
};
onload();
</script>

<style lang="scss" scoped>
.share_con {
  width: 70vw;
  min-height: 5rem;
  background: transparent;
  img {
    width: 100%;
  }
}
.van-nav-bar__right {
  font-weight: bold;
  font-size: .3846rem;
}
.share_btn_group {
  display: flex;
  justify-content: space-between;
  margin-top: 0.24rem;
  .share_btn {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: black;
    height: 0.65rem;
    border-radius: .1923rem;
  }
}

.refresh {
  margin-top: -0.3846rem;
}

.invite { 
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: .3846rem;
    box-shadow: .0962rem .0962rem .3846rem .1923rem #f3f5f6;
    width: 80%;
    border-radius: .1923rem;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    .invitnum { 
        font-weight: bold;
        font-size: .3846rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        .top { 
            font-size: .4808rem;
        }
    }
}
</style>